<script setup>
import PermissionForm from './Form.vue'
import {Delete, Edit} from "@element-plus/icons-vue";
import SettingPermissionAPI from "@/api/setting/permission.js";
import {arr2Tree} from "@/utils/tools.js";
import {getMethodType} from "@/views/setting/permission/common.js";

defineOptions({
  name: "SettingPermission",
  inheritAttrs: false,
})

const dirTreeData = ref([])

onMounted(() => {
  getList()
})

const treeData = ref([])

const permissionFormRef = ref()
const __permissionFormClose = () => {
  getList()
}

const getList = () => {
  SettingPermissionAPI.getList().then((res) => {
    treeData.value = arr2Tree(res)
    dirTreeData.value = arr2Tree(res.filter(v => v.type === 1)).filter(v => v.pid === 0)
  })
}
const _refresh = () => {
  SettingPermissionAPI.refresh().then(res => {
    getList()
  })
}
</script>

<template>
  <el-button type="warning" @click="_refresh">刷新</el-button>
  <el-button type="primary" plain @click="permissionFormRef.open()">新增</el-button>
  <div style="height: 10px;"></div>
  <el-table
      border
      :tree-props="{ children: 'children' }"
      :data="treeData"
      row-key="id"
      default-expand-all
  >
    <el-table-column label="权限">
      <template #default="{ row }">
        {{ row.id }}. {{ row.name }}
      </template>
    </el-table-column>
    <el-table-column label="权限请求">
      <template #default="{ row }">
        <el-tag v-if="row.method" :type="getMethodType(row.method).type" effect="dark">
          {{ row.method }}
        </el-tag>
        {{ row.uri }}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="sort" label="排序" width="80"/>
    <!--点击操作-->
    <el-table-column fixed="right" align="center" width="150" label="操作" class-name="fixed-width">
      <template #default="{ row }">
        <div v-if="row.type === 1">
          <el-button link type="primary" :icon="Edit" size="large" @click="permissionFormRef.open(row.id)"/>
          <el-button link type="danger" :icon="Delete" size="large" @click="_del(row)"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <PermissionForm ref="permissionFormRef" :cascader-data="dirTreeData" @close="__permissionFormClose"/>
</template>

<style scoped>

</style>